<template>
  <el-container style="height: 100vh; overflow:hidden;">
    <el-aside
      :width="isOpen ? '64px' : '200px'"
      style="background-color: #001529"
    >
      <el-menu
        background-color="#001529"
        text-color="#909399"
        active-text-color="#fff"
        ref="navMessage"
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        unique-opened
        :collapse="isOpen"
        router
        collapse-transition
      >
        <el-sub-menu :index="item.path" v-for="item in navAside" :key="item.id">
          <template #title>
            <i :class="iconObj[item.id]"></i>
            <span>{{ item.authName }}</span>
          </template>
          <el-menu-item
            :index="'/index/' + _item.path"
            v-for="_item in item.children"
            :key="_item.id"
          >
            <template #title>
              <i class="el-icon-menu"></i>
              <span>{{ _item.authName }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container class="main_info">
      <el-header
        class="aside_header"
        style="text-align: right; font-size: 12px"
      >
        <div
          class="header_left"
          :class="isOpen ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
          @click="changeShow"
          style="font-size: 16px"
        ></div>
        <div class="header_right">
          <el-dropdown class="index_user">
            <span class="el-dropdown-link">
              <i class="el-icon-setting" style="margin-right: 15px"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="signOut">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>{{ $store.state.username }}</span>
        </div>
      </el-header>

      <div class="tab_wrap">
        <router-view></router-view>
      </div>
    </el-container>
  </el-container>
</template>
<script >
import {
  defineComponent,
  reactive,
  ref,
  onMounted,
  getCurrentInstance,
  watch,
} from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { getNavAside } from "../../http/api";
export default defineComponent({
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const { ctx } = getCurrentInstance();
    const navAside = reactive([]);
    const isOpen = ref(false);
    const activeMenu = ref("/index/users");
    const iconObj = reactive({
      125: "el-icon-user-solid",
      103: "el-icon-more",
      101: "el-icon-s-goods",
      102: "el-icon-document",
      145: "el-icon-s-data",
    });
    const signOut = () => {
      store.commit("set_token", "");
      store.commit("set_username", "");
      router.push({
        name: "login",
      });
    };
    const changeShow = () => {
      isOpen.value = !isOpen.value;
    };
    onMounted(() => {
      getNavAside().then((res) => {
        Object.assign(navAside, res);
      });
    });

    return {
      navAside,
      activeMenu,
      iconObj,
      signOut,
      isOpen,
      changeShow,
    };
  },
});
</script>
<style lang="scss" scoped>
.el-header {
  background-color: #fff;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
  overflow: hidden;
}
.aside_title {
  width: 100%;
  height: 60px;
  line-height: 60px;
  color: #fff;
  font-size: 18px;
}

.main_info {
  display: flex;
  flex-direction: column;
  .aside_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    .el-icon-s-unfold:before,
    .el-icon-s-fold:before {
      font-size: 20px;
    }
  }
  .tab_wrap {
    flex: 1;
    background-color: #eee;
    .tab_box {
      background-color: #fff;
      display: flex;
      flex-direction: column;
      margin: 20px;
      box-sizing: content-box;
      .tab_top {
        background-color: #fff;
        padding: 10px;
        .tab_add {
          width: 100%;
          display: flex;
          align-items: center;
          .inp_btn {
            float: right;
          }
        }
      }
    }
    .tab_pagnum {
      text-align: left;
    }
  }
}

.tab_nav {
  width: 100%;
  height: 30px;
  line-height: 30px;
}
::v-deep .tab_wrap {
  padding: 20px;
}
</style>

